<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mobileiframe</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="">
<style>
	body,dl,dt,dd,ul,li{margin: 0; padding: 0;}
	ul,ol{list-style:none outside none;}
	body{color: #333; font: 12px/1.5 "Microsoft Yahei","\5FAE\8F6F\96C5\9ED1";}
	a{text-decoration: none;}
	
	/**/
	.feature-services .select .title,.feature-services .link em
	{background: url(images/mobile2015-icon1.png) no-repeat;}
	
	.feature-services{height: 209px; width: 438px;}
	.feature-services dl{float: left; padding: 0 0 0 20px;}
    .feature-services .flow-service{width: 186px;}
	.feature-services dl dt{margin: 5px 0 0; font-size: 14px; line-height: 32px;}
	
	.feature-services .flow-item{position: relative; margin: -3px 0 0;}
	.feature-services li{height: 30px; margin: 10px 0 0; line-height: 30px; vertical-align: middle;}
	.feature-services li label{float: left; padding: 0 12px 0 0; font-size: 12px;}
	.feature-services li input{position: relative; zoom: 1; display: block; width: 115px; height: 28px; overflow: hidden; padding: 0 8px; border: 1px #e6e6e6 solid; background: #fff; color: #333; font: normal 12px/28px "Microsoft Yahei","\5FAE\8F6F\96C5\9ED1";}
	.feature-services .select{position: relative; zoom: 1; float: left; width: 133px; color: #666; cursor: pointer;}
	.feature-services .select .title{position: relative; zoom: 1; display: block; padding: 0 21px 0 8px; width: 102px; height: 28px; overflow: hidden; border: 1px #e6e6e6 solid; background-position: 100% -20px; background-color: #fff; line-height: 28px;}
	.feature-services .select .list{position: absolute; top: 29px; left: 0; width: 131px; height: 78px; overflow: auto; display: none; border: 1px #ccc solid; border-top: 0 none; background-color: #fff;}
	.feature-services .select .list span{display: block; padding: 0 8px; line-height: 26px;}
	.feature-services .select .list span:hover{background-color: #fafafa;} 
	.feature-services .select:hover .title{border-color: #ccc;}
	.feature-services .select-hover .title{border-color: #ccc; background-position: 100% -50px;}
	.feature-services .select-hover .list{display: block;}
	.feature-services .price{color: #f33; font: normal 12px/30px "Microsoft Yahei","\5FAE\8F6F\96C5\9ED1";}
	
	.feature-services .button-box{height: 30px; margin: 8px 0 0;}
	.feature-services .button-box a{float: left; width: 88px; height: 30px; -webkit-border-radius: 2px; border-radius: 2px; background: #2E97F0; color: #fff; font-size: 14px; text-align: center; line-height: 30px; text-decoration: none;}
	.feature-services .button-box .rechange-btn{margin: 0 10px 0 0;}
	.feature-services .button-box .discount-btn{background: #FF4747;}
	
	.feature-services .link{width: 206px; overflow: hidden; zoom: 1;}
	.feature-services .link a{position: relative; zoom: 1; float: left; margin: 7px 8px 1px 0; padding: 34px 0 0; width: 90px; height: 34px; border: 1px #e6e6e6 solid; text-align: center; color: #666; font-size: 14px; line-height: 34px; background-color: #fff;}
	.feature-services .link em{position: absolute; left: 50%;}
	.feature-services .link .ico-1{top: 10px; margin: 0 0 0 -16px; width: 27px; height: 24px; background-position: 0 -420px;}
	.feature-services .link .ico-2{top: 14px; margin: 0 0 0 -13px; width: 26px; height: 19px; background-position: -30px -420px;}
	.feature-services .link .ico-3{top: 12px; margin: 0 0 0 -14px; width: 25px; height: 21px; background-position: 0 -445px;}
	.feature-services .link .ico-4{top: 13px; margin: 0 0 0 -11px; width: 22px; height: 21px; background-position: -30px -440px;}
	.feature-services .link a:hover{color: #2e99f3; text-decoration: none; border-color: #2e99f3;}
	.feature-services .link a:hover .ico-1{background-position: 0 -470px;}
	.feature-services .link a:hover .ico-2{background-position: -30px -465px;}
	.feature-services .link a:hover .ico-3{background-position: 0 -495px;}
	.feature-services .link a:hover .ico-4{background-position: -30px -485px;}
    

</style>
<script src="./Public/other/js/jquery-1.8.1.js"></script>
</head>
<body>
  <div class="feature-services">
  	<dl class="flow-service" style="padding:0px;">
        <dt style="display:none">手机流量充值</dt>
  		<dd>
  			<ul class="flow-item">
  				<li>
  					<label for="numberItem">号码</label>
  					<input type="text" id="numberItem" placeholder="请输入手机号码" maxlength="11" value="" />
  				</li>
  				<li>
  					<label for="flowItem">流量</label>
  					<div class="select" id="flowItem">
						<span class="title" id="flowItem-title"></span>
						<!-- <div class="list sel-layer" id="flowItem-layer">
						<span class="sel-item" data-price="1.00" data-product-id="P2">
                                2M</span>
                        <span class="sel-item" data-price="1.43" data-product-id="P33">
                                5M</span>
                        <span class="sel-item" data-price="3.00" data-product-id="P44">
                                10M</span>
                        <span class="sel-item" data-price="3.80" data-product-id="P47">
                                20M</span>
                        <span class="sel-item" data-price="5.00" data-product-id="P42">
                                30M</span>
                        <span class="sel-item" data-price="7.60" data-product-id="P7">
                                50M</span>
                        <span class="sel-item" data-price="13.30" data-product-id="P48">
                                100M</span>
                        <span class="sel-item" data-price="17.10" data-product-id="P38">
                                200M</span>
                        <span class="sel-item" data-price="38.00" data-product-id="P49">
                                500M</span>
                        <span class="sel-item" data-price="40.00" data-product-id="P46">
                                700M</span>
                        <span class="sel-item" data-price="114.00" data-product-id="P50">
                                1G  </span>
                         </div> -->
					</div>
  				</li>
  				<li>
  					<label for="flowPrice">价格</label>
                    <em class="price">&yen;<span id="show-price-span">0</span></em> <span style="color:#666;margin-left:10px;">10.0折</span>
  				</li>
  			</ul>
  			
  			<div class="button-box">
  				<a href="javascript:void(0);" class="rechange-btn" style="background:#f33;" id="charge-flow-now-a">立即充值</a>
  			</div>
  		</dd>
  	</dl>
  </div>
  
</body>
</html>
